<template>
  <view class="content">
    <view class="user-container">
      <view @click="toLogin">
        <u-avatar :src="user.avatar" size="130"></u-avatar>
        <view>{{ user.nickname || "点击头像登录" }}</view>
      </view>
       <navigator url="/pages/account/clearUser">
      <view v-show="isLogin" style="margin-top:10rpx;">注销账户</view>
       </navigator>
    </view>
    <view class="menu-container">
      <u-cell-group :border="false">
        <u-cell-item
          v-if="!isShow"
          @click="heandleClickCell"
          index="1"
          title="我的订单"
        ></u-cell-item>
        <!-- <u-cell-item
          @click="heandleClickCell"
          index="2"
          title="我的优惠券"
        ></u-cell-item> -->
        <u-cell-item
          @click="heandleClickCell"
          index="3"
          title="客服服务"
        ></u-cell-item>
        <u-cell-item
          @click="heandleClickCell"
          index="4"
          title="意见反馈"
        ></u-cell-item>
        <u-cell-item
          @click="heandleClickCell"
          index="5"
          title="商务合作"
          :border-bottom="false"
        ></u-cell-item>
      </u-cell-group>
    </view>

    <view class="loginout-btn" v-show="isLogin">
      <button type="default" @click="loginOut('退出登录成功！')">退出登录</button>
    </view>
    <view class="version">版本号：1.1.1</view>
  </view>
</template>

<script>
import { mapState,mapActions,mapGetters } from 'vuex'
export default {
  data() {
    return {
      src: "",
    };
  },
    computed: {
    ...mapState("user", ["user"]),
    ...mapState("Public", ["isShow"]),
    ...mapGetters("user", ["isLogin"])
  },
  methods: {
    ...mapActions("user", ["loginOut"]),
    toLogin() {
      if(this.isLogin) return
      uni.navigateTo({
        url: '/pages/account/login'
      });
    },
    heandleClickCell(index) {
      const pages = {
        1: "/pages/order/index",
        2: "/pages/coupon/index",
        3: "/pages/user/customerService",
        4: "/pages/user/feedback",
        5: "/pages/user/cooperation",
      };
      // uni.navigateTo({
      //   url: pages[index],
      // });
      this.isLoginNavigateTo(pages[index])
    },
    heandleLoginOut() {},
  },
};
</script>
<style lang="scss">
.content {
  position: relative;
}
.user-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 350rpx;
  padding-top: 60rpx;
  background-color: #3745eb;
  color: white;

  & > view {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }
}

.menu-container {
  position: absolute;
  top: 300rpx;
  width: 100%;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;
  background-color: white;
  padding: 30rpx;
}

.loginout-btn {
  position: absolute;
  left: 50%;
  bottom: -750rpx;
  transform: translateX(-50%);
  width: 80%;
  & > button {
    font-size: 24rpx;
    color: #fe4c00;
    background-color: #f6dccc;
  }
}

.version {
  position: absolute;
  left: 50%;
  bottom: -850rpx;
  transform: translateX(-50%);
  font-size: 20rpx;
}
</style>
